<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <!--
        1：注意当ref添加在一个h5的标签上时，通过this.$refs.zsk可以获取该dom元素，再用js
            相关操作进行操作该dom

        2: 自定义的组件上用ref时，通过this.$refs.one 获取是获取子组件的vue对象的引用，


        -->
    <div id="app">
        <div ref="zsk" @click="divhandle">{{msg}}</div>
        <div ref="nrj">{{msg}}</div>
        <div ref="zsknrj">{{msg}}</div>
        <count ref="one" @change="changehandle"></count>
        <count ref="two" @change="changehandle"></count>
        <div>{{total}}</div>
    </div>
    <script type="text/javascript">
//定义：局部组件
Vue.component("test",{
    data:function(){
        return {
            tt:'112'
        }
    },
    props:{
        aaa:{
            type:Object,
            default:"dkgj"
        }
    }
})
    Vue.component("count", {
        data: function() {
            return {
                number: 0
            }
        },
        template: "<div @click='subclick'> {{ number }}</div>",
        methods: {
            subclick: function() {
                this.number++;
                this.$emit("change");
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'click',
            total: 0
        },
        methods: {
            divhandle: function() {
                console.log(this.$refs.zsk.innerHTML)
            },
            changehandle: function() {
                console.log(this.$refs.one)
                this.total = this.$refs.one.number + this.$refs.two.number;

            }
        }
    });
    </script>
</body>

</html>